<template>
	<view>
		<view v-for="(item) in list" 
		class="comment uni-padding-wrap" 
		:class="{bold_border: item.is_main_floor, bold_border_bottom: page == 'my-comment'}" 
		:id="item.id" 
		:key="item.key" 
		@tap="commentTapped" 
		@touchmove="touchmove" 
		:data-key="item.key" 
		:data-id="item.id" 
		:data-username="item.user.name" 
		:data-is_main_floor="item.is_main_floor" 
		:data-tid="item.tid" 
		>
		  <view v-if="page != 'my-comment' && item.topic  && item.topic.title && item.is_main_floor == 1" class="topic-title">
				<text>{{ item.topic.title }}</text>
			</view>
		  <view class="uni-flex header">
				<view class="avatar-box"><image :src="item.user.avatar" class="avatar" mode="aspectFill" /></view>
				<view class="uni-flex metabox">
					<view>
						<text class="username">{{ item.user.name }}</text>
						<text class="username" v-if="item.parent && item.pid != item.root_id"> {{ ' ' }}回复 {{ ' ' + item.parent.user.name }}</text>
					</view>
					<text class="forum">{{ (page == "topic-comment" ? (item.floor_num_human + " | ") : "") + (item.created_at) }}</text>
				</view>
				<view class="action-wrap">
					<view class="uni-flex like-wrap" :class="{liked: item.is_liked}" v-if="(item.is_main_floor == 0 || (item.root_id == 0 && item.floor_num > 1)) && page != 'my-comment'" @tap.stop="createLike" :data-key="item.key" :data-is_liked="item.is_liked">
						<icon class="iconfont icon-like" />
						<text class="like-count" v-if="item.like_count > 0">{{ item.like_count}}</text>
						<text class="like-count" v-if="item.like_count == 0">赞</text>
					</view>
				</view>
		  </view>
			<!--图文部分-->
		  <view class="content" :class="{reply: (page == 'topic-comment' || page == 'comment-detail') && item.is_main_floor == 0}">
				<block v-if="detailExcerpt">
					<view class="block">
						<text class="text-three-line">{{ item.detail.content }}</text>
					</view>
				</block>
				<block v-if="!detailExcerpt">
					<view v-if="item.is_main_floor && item.topic && item.topic.is_report && report" class="report-box">
						<view class="report-field">
							<view class="label">出击时间：</view>
							<view class="value">{{report.action_time}}</view>
						</view>
						<view class="report-field">
							<view class="label">出击地点：</view>
							<view class="value">{{report.action_province}}-{{report.action_city}}-{{report.action_district}}，{{report.action_location}}</view>
						</view>
						<view class="report-field tag-wrap" v-if="topic.tags && topic.tags.length > 0">
							<view class="label">服务标签：</view>
							<view class="value">
								<text class="tag-item" v-for="(tag, tag_index) in topic.tags" :key="tag_index">{{ tag.name }}</text>
							</view>
						</view>
					</view>
					<block v-for="(content, content_index) in item.detail.content" :key="content_index">
						<view class="block" v-if="content.type == 'text'">
							<text class="word-break">{{ content.data.text}}</text>
						</view>
						<view class="block" v-if="content.type == 'image'">
							<image :src="content.data.url" class="image" mode="widthFix" :data-key="item.key" :data-url="content.data.url" @tap.stop="preview" />
						</view>
					</block>
					<view v-if="item.is_main_floor && item.hide" class="">
						<view class="">
							<text class="content-hide-header text-muted">{{item.hide.require_header}}</text>
						</view>
						<block v-for="(content, content_index) in item.hide.content" :key="content_index">
							<view class="block" v-if="content.type == 'text'">
								<text class="word-break">{{ content.data.text}}</text>
							</view>
							<view class="block" v-if="content.type == 'image'">
								<image :src="content.data.url" class="image" mode="widthFix" :data-key="item.key" :data-url="content.data.url" @tap.stop="preview" />
							</view>
						</block>
					</view>
					<!-- 购买按钮 -->
					<view v-if="item.is_main_floor == 1 && item.hide && item.hide.can_be_seen == 0 && item.hide.btn_purchase_text" class="purchase-wrap">
						<button class="btn-purchase" @tap.stop="purchaseConfirm" :data-tid="item.tid">{{ item.hide.btn_purchase_text}}</button>
					</view>
				</block>
		  </view>
			
			<!--帖子操作，点赞等-->
			<view class="action-wrap uni-flex" v-if="page == 'topic-comment' && item.is_main_floor == 1">
				<view class="uni-flex uni-flex-item  view-wrap">
					<icon class="iconfont icon-view" />
					<text>{{ item.topic.view_count}}</text>
				</view>
				<view class="uni-flex uni-flex-item like-wrap" :class="{liked: item.is_liked}" @tap.stop="createLike" :data-key="item.key" :data-is_liked="item.is_liked">
					<icon class="iconfont icon-like" />
					<text class="like-count" v-if="item.like_count > 0">{{ item.like_count}}</text>
					<text class="like-count" v-if="item.like_count == 0">赞</text>
				</view>
				<!-- #ifdef H5 || APP-PLUS -->
				<view class="uni-flex uni-flex-item share-wrap" @tap.stop="share">
					<icon class="iconfont icon-share" />
				</view>
				<!-- #endif -->
				<!-- #ifdef MP -->
				<view class="uni-flex uni-flex-item share-wrap share-wrap-weixin">
					<button open-type="share"><icon class="iconfont icon-share" /></button>
				</view>
				<!-- #endif -->
			</view>
			<!--楼中楼部分-->
		  <view class="uni-flex commentcomment" :class="{reply: (page == 'topic-comment' || page == 'comment-detail') && item.is_main_floor == 0}" v-if="item.first_comments && item.first_comments.length > 0">
				<view class="wrap">
					<view class="item" v-for="(first_comment, first_comment_index) in item.first_comments" :key="first_comment.key">
						<text class="username">{{ first_comment.user.name }}：</text>
						<text v-if="first_comment.parent && first_comment.pid != first_comment.root_id" class="reply-target">回复</text>
						<text v-if="first_comment.parent && first_comment.pid != first_comment.root_id" class="username">{{first_comment.parent.user.name}}：</text>
						<text class="word-break">{{ first_comment.detail.content[0].data.text}}</text>
					</view>
				</view>
			</view>
			<!--我的回复部分，特殊添加-->
			<view class="uni-flex topic" v-if="page == 'my-comment'">
				<view class="image-wrap">
					<image :src="(item.topic.main_floor.detail.attachments.length && item.topic.main_floor.detail.attachments[0].url) || item.topic.user.avatar" class="image" mode="aspectFill" />
				</view>
				<view class="uni-flex content-box">
					<text class="username">@{{ item.topic.user.name }}</text>
					<text class="content text-two-line">{{ item.topic.main_floor.detail.content }}</text>
				</view> 
		  </view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			propsList: {
				type: Array,
				required: false,
				default() {
					return []
				}
			},
			propsTopic: {
				required: false,
				type: Object
			},
			propsReport: {
				required: false,
				type: Object
			},
			page: {
				required: false,
				type: String
			},
			detailExcerpt: {
				required: false,
				type: Boolean,
				default: false
		  },
		  imagesToPreview: {
				required: false,
				type: Object
		  }
		},
		data() {
			return {
				list: this.$props.propsList,
				topic: this.$props.propsTopic,
				report: this.$props.propsReport
			}
		},
		watch: {
			propsList(newData, oldData) {
				this.list = newData
			},
			propsTopic(n, o) {
				this.topic = n
			},
			propsReport(n, o) {
				this.report = n
			}
		},
		methods: {
			commentTapped(e) {
				let dataset = e.currentTarget.dataset;
				console.log('commentTapped, ', dataset)
				if (this.page == 'topic-comment' && dataset.is_main_floor == 1) {
					console.log(`main floor, don't jump: `, dataset);
					return;
				}
				if (this.page == "comment-detail") {
					this.$emit('change-parent-comment', dataset);
					console.log(`is detail..., change parent comment to: `, dataset);
					return;
				}
				let url = "/pages/comment-detail/comment-detail?root_id=" + dataset.id + "&include_root_comment=1"
				if (this.page == 'my-comment') {
					url += "&include_topic=1&tid=" + dataset.tid
				}
				uni.navigateTo({
					"url": url
				})
		  },
		  touchmove(e) {
				if (this.page != 'comment-detail') {
					console.log(`not comment-detail, return`);
					return;
				}
				console.log(`touchmove, emit event 'reset-parent-comment'`);
				let dataset = e.currentTarget.dataset;
				this.$emit('reset-parent-comment', dataset);
		  },
		  preview(e) {
				let dataset = e.currentTarget.dataset;
				console.log("preview", dataset, "current: ", dataset.url, "urls: ", this.imagesToPreview[dataset.key]);
				if (!this.imagesToPreview[dataset.key]) {
					return
				}
				uni.previewImage({
					current: dataset.url,
					urls: this.imagesToPreview[dataset.key]
				})
		  },
			gotoProfile(e) {
				console.log(`gotoProfile`, e)
				let url = ''
				let dataset = e.target.dataset
				if (dataset.technician_id) {
					url = '/pages/profile/technician?id=' + dataset.technician_id
				} else if (dataset.club_id) {
					url = '/pages/profile/club?id=' + dataset.club_id
				} else {
					uni.showToast({
						title: 'ERROR'
					})
					return
				}
				uni.navigateTo({
					url: url
				})
			},
		  async createLike(e) {
				let dataset = e.currentTarget.dataset;
				if (dataset.is_liked == 1) {
					console.log(`createLike, is_liked, return`);
					return;
				}
				let res = await this.$api.createLike({"key": dataset.key, "target_type": 1});
				console.log(`createLike, res: `, res);
				if (res.ret === 0) {
					let length = this.list.length
					console.log(`going to set liked, length: ${length}`);
					for (let i = 0; i < length; i++) {
						console.log(`this key: ${this.list[i].key}, dataset key: ${dataset.key}`);
						if (this.list[i].key == dataset.key) {
							console.log(`this key: ${this.list[i].key} == dataset key: ${dataset.key}, set is_liked = 1, be red please!`);
							this.list[i].is_liked = 1
							this.list[i].like_count = res.data.like_count
							break;
						}
					}
				}
		  },
			share(e) {
			  // #ifdef H5
				console.log(document.URL)
				let url = document.URL
				uni.showToast({
					title: url,
					icon: 'none'
				})
				// #endif
				
				// #ifdef APP-PLUS
				uni.getProvider({
					service: 'share',
					success(res) {
						console.log('uni.getProvider: ', res)
						uni.share({
						    provider: res.provider,
						    scene: "WXSceneSession",
						    type: 1,
						    summary: "我正在使用 Huanbao App, 快来看一下这个精彩的帖子：" + this.topic.title_excerpt,
						    success: function (res) {
						        console.log("uni.share success:" + JSON.stringify(res));
						    },
						    fail: function (err) {
						        console.log("uni.share fail:" + JSON.stringify(err));
						    }
						});
					}
				})
				// #endif
			},
			async purchaseConfirm(e) {
				let self = this
				let dataset = e.currentTarget.dataset;
				console.log(dataset)
				const res = await this.$api.purchaseConfirm({"type": 1, "id": dataset.tid})
				console.log(res)
				if (res.ret != 0) {
					return
				}
				uni.showModal({
				    title: '提示',
				    content: res.msg,
				    success: async function (res) {
							if (res.confirm) {
									let res = await self.$api.createTopicOrderAndPay({"type": 1, "id": dataset.tid})
									if (res.ret == 0) {
										this.$emit('fresh-page');
									}
							} else if (res.cancel) {
									console.log('用户点击取消');
							}
				    }
				});
			}
		}
	}
</script>

<style lang="scss">
.comment {
	padding-top: 20upx;
	padding-bottom: 20upx;
	&:not(:last-child) {
		border-bottom: 2upx solid #eee;
	}
	
  .topic-title {
		margin-bottom: 10upx;
		text {
			font-size: 40upx;
			font-weight: bold;
		}
  }
  .header {
    height: 80upx;
		margin-bottom: 20upx;
		align-items: center;
    .avatar-box {
      width: 80upx;
			height: 80upx;
			box-sizing: content-box;
      padding-right: 20upx;
      .avatar {
        max-width: 100%;
        max-height: 100%;
				border-radius: 50%;
      }
    }
    .metabox {
      flex-direction: column;
			flex-grow: 1;
      .forum {
        font-size: 80%;
        color: #aaa;
      }
    }
    
  }
  .content {
    .block {
      margin: 10upx 0;
    }
    .image {
      width: 100%;
      max-width: 100%;
    }
    .report-box {
			// margin-bottom: 30upx;
			// padding: 20upx;
			// color: brown;
			// background-color: blanchedalmond;
			.label {
				font-weight: bold;
			}
			.report-field {
				display: flex;
				flex-direction: row;
				padding: 10upx 0;
				.label {
					flex-shrink: 0;
				}
			}
		}
		.content-hide-header {
			font-style: italic;
			margin: 10upx 0;
			text-decoration: underline;
		}
		.purchase-wrap {
			text-align: center;
			.btn-purchase {
				display: inline-block;
				background-color: rgb(250, 81, 81);
				color: #fff;
				margin-top: 40upx;
				margin-bottom: 40upx;
				font-size: 28upx;
			}
		}
		
  }
	.tag-wrap {
		.tag-item {
			padding: 0 16upx;
			margin-right: 20upx;
			background-color: #eee;
		}
	}
  .commentcomment {
    flex-direction: column;
    .wrap {
      padding: 10px;
      background-color: #eee;
      .item {
        &:not(:last-child) {
          margin-bottom: 10px;
        }
        .username {
          color: blue;
        }
        .reply-target {
          margin-right: 20upx;
        }
      }
    }
  }
	.action-wrap {
		margin-top: 20upx;
		justify-content: space-between;
		align-items: center;
		color: #777;
		.iconfont {
			margin-right: 10upx;
		}
		.uni-flex-item {
			justify-content: center;
			align-items: center;
		}
		.like-wrap {
			align-items: center;
		}
		.share-wrap-weixin {
			button {
				&::after {
					border: none;
				}
				background-color: #fff;
				color: #777;
			}
		}
	}
  .reply {
    padding-left: 100upx;
  }
  .topic {
    background-color: #eee;
    height: 180upx;
		.image-wrap {
			width: 180upx;
			height: 180upx;
			padding-right: 20upx;
			.image {
			  max-height: 100%;
				max-width: 100%;
			}
		}
    .content-box {
			height: 180upx;
			width: calc(100% - 200upx);
      justify-content: center;
      flex-direction: column;
			box-sizing: border-box;
      .username {
      }
      .content {
        font-size: 90%;
      }
    }
  }
}
.thin-border {
	border-bottom: 2upx solid #eee !important;
}
.bold_border {
	border-bottom: 10upx solid #eee !important;
}

.liked {
	color: orangered !important;
	.icon-like, .like-count {
		color: orangered !important;
	}
}
</style>
